<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOrderDetail } from '../../api/order'
import { showToast } from 'vant'

const route = useRoute()
const router = useRouter()
const orderId = route.params.id as string

// 订单信息
const order = ref<any>({})
// 加载状态
const loading = ref(false)

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '未知';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 计算订单状态
const orderStatus = computed(() => {
  if (!order.value || !order.value.payments) {
    return { text: '加载中...', color: '#969799', icon: 'underway' };
  }
  
  const payments = order.value.payments || [];
  
  if (payments.length === 0) {
    return { text: '待支付', color: '#ff976a', icon: 'clock' };
  }
  
  const payment = payments[0];
  if (!payment.isPaid) {
    return { text: '待支付', color: '#ff976a', icon: 'clock' };
  }
  
  const now = new Date();
  const checkOutDate = order.value.checkOutDate ? new Date(order.value.checkOutDate) : null;
  
  if (checkOutDate && now > checkOutDate) {
    return { text: '已完成', color: '#07c160', icon: 'checked' };
  }
  
  return { text: '已确认', color: '#1989fa', icon: 'underway' };
});

// 计算入住天数
const stayDays = computed(() => {
  if (!order.value || !order.value.checkInDate || !order.value.checkOutDate) return 1;
  
  const start = new Date(order.value.checkInDate);
  const end = new Date(order.value.checkOutDate);
  const diffTime = Math.abs(end.getTime() - start.getTime());
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  return diffDays || 1;
});

// 计算订单总价
const totalPrice = computed(() => {
  if (!order.value || !order.value.room) return 0;
  return order.value.room.price * stayDays.value;
});

// 获取酒店名称
const getHotelName = async (hotelId: number) => {
  // 这里可以添加获取酒店名称的逻辑，如果有接口的话
  // 暂时返回默认值
  return '示例酒店';
};

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    loading.value = true;
    const res = await getOrderDetail(orderId);
    order.value = res.data || {};
    
    // 如果需要获取酒店名称，可以在这里调用
    if (order.value.room && order.value.room.hotelID) {
      order.value.hotelName = await getHotelName(order.value.room.hotelID);
    }
  } catch (error: any) {
    showToast(error.message || '获取订单详情失败');
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 页面初始化
onMounted(() => {
  fetchOrderDetail();
});
</script>

<template>
  <div class="order-detail-container">
    <van-nav-bar
      title="订单详情"
      left-arrow
      @click-left="goBack"
    />
    
    <div class="loading-container" v-if="loading">
      <van-loading type="spinner" color="#1989fa" />
    </div>
    
    <template v-else>
      <!-- 订单状态 -->
      <div class="order-status" :style="{backgroundColor: orderStatus.color}">
        <div class="status-content">
          <div class="status-info">
            <van-icon :name="orderStatus.icon" size="24" color="#fff" />
            <span class="status-text">{{ orderStatus.text }}</span>
          </div>
          <div class="order-id">订单号: {{ order.orderID }}</div>
        </div>
      </div>
      
      <!-- 房间信息 -->
      <div class="info-card">
        <div class="card-title">
          <van-icon name="hotel-o" size="18" />
          <span>房间信息</span>
        </div>
        <div class="room-info">
          <div class="room-name">
            <span class="room-type">{{ order.room?.roomType || '未知房型' }}</span>
            <span class="hotel-name">{{ order.hotelName || '酒店名称' }}</span>
          </div>
          <div class="room-price">¥{{ order.room?.price || 0 }}</div>
        </div>
        <div class="stay-info">
          <div class="date-range">
            <div class="check-date">
              <span class="date-label">入住</span>
              <span class="date-value">{{ formatDate(order.checkInDate) }}</span>
            </div>
            <van-icon name="arrow" class="date-arrow" />
            <div class="check-date">
              <span class="date-label">离店</span>
              <span class="date-value">{{ formatDate(order.checkOutDate) }}</span>
            </div>
          </div>
          <div class="stay-days">共{{ stayDays }}晚</div>
        </div>
      </div>
      
      <!-- 价格详情 -->
      <div class="info-card">
        <div class="card-title">
          <van-icon name="balance-o" size="18" />
          <span>价格详情</span>
        </div>
        <div class="price-item">
          <span>房费</span>
          <span>¥{{ order.room?.price || 0 }} × {{ stayDays }}晚</span>
        </div>
        <div class="total-price">
          <span>总计</span>
          <span class="price">¥{{ totalPrice }}</span>
        </div>
      </div>
      
      <!-- 支付信息 -->
      <div class="info-card" v-if="order.payments && order.payments.length > 0">
        <div class="card-title">
          <van-icon name="paid" size="18" />
          <span>支付信息</span>
        </div>
        <div class="payment-info">
          <div class="payment-item">
            <span>支付方式</span>
            <span>{{ order.payments[0].paymentMethod }}</span>
          </div>
          <div class="payment-item">
            <span>支付状态</span>
            <span :style="{color: order.payments[0].isPaid ? '#07c160' : '#ff976a'}">
              {{ order.payments[0].isPaid ? '已支付' : '待支付' }}
            </span>
          </div>
          <div class="payment-item">
            <span>支付金额</span>
            <span>¥{{ order.payments[0].amount }}</span>
          </div>
        </div>
      </div>
      
      <!-- 用户信息 -->
      <div class="info-card">
        <div class="card-title">
          <van-icon name="contact" size="18" />
          <span>用户信息</span>
        </div>
        <div class="user-info">
          <div class="user-item">
            <span>用户名</span>
            <span>{{ order.user?.username || '未知用户' }}</span>
          </div>
          <div class="user-item">
            <span>邮箱</span>
            <span>{{ order.user?.email || '无邮箱信息' }}</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.order-detail-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 20px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.order-status {
  padding: 24px 16px;
  margin-bottom: 12px;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-text {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.order-id {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.info-card {
  background-color: #fff;
  border-radius: 8px;
  margin: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f5f5f5;
}

.room-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.room-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.room-type {
  font-size: 16px;
  font-weight: bold;
}

.hotel-name {
  font-size: 14px;
  color: #646566;
}

.room-price {
  font-size: 18px;
  font-weight: bold;
  color: #ee0a24;
}

.stay-info {
  padding-top: 16px;
  border-top: 1px dashed #ebedf0;
}

.date-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.check-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-label {
  font-size: 12px;
  color: #969799;
}

.date-value {
  font-size: 14px;
  font-weight: 500;
}

.date-arrow {
  color: #969799;
}

.stay-days {
  text-align: center;
  font-size: 14px;
  color: #646566;
}

.price-item, .total-price, .payment-item, .user-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.total-price {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #ebedf0;
  font-weight: bold;
}

.price {
  color: #ee0a24;
  font-size: 18px;
}

.payment-info, .user-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style> 